
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>K5G-C</title>
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/index.css" />
</head>

<body>
<div class="main">
    <div class="tit-heade">
        <div class="itemOne">
            <img src="./image/left.png" >
        </div>
        <div class="itemTwo">
            <div class="item-chil">
                <img src="./image/logoutOne.png">
            </div>
            <div class="item-chil">
                <a href="/action/logout">ログアウト</a>
            </div>
            
        </div>
    </div>
    <div class="nav2">
        <div class="nav-item">
            <div id='x1' class="item" onclick="toPage('./home.html')">ホーム</div>
        </div>
        <div class="nav-item">
            <div id='x2' class="item no-act" onclick="toPage('./mobileData.html')">モバイルネットワーク</div>
        </div>
        <div class="nav-item">
            <div id='x3' class="item no-act" onclick="toPage('./wifi.html')">Wi-Fi設定</div>
            <div class="hide">
                <div>
                    <div id='x31' class="item1 no-act">wifi設定</div>
                    <div class="hide">
                        <div class="item2" id="wifi1" onclick="toPage('./wifi.html')">Wi-Fi</div>
                        <div class="item2" id="wifi2" onclick="toPage('./wifiList.html')">Wi-Fi 接続情報</div>
                        <div class="item2" id="wifi_list" onclick="toPage('./wifiManage.html')">接続デバイスの管理</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="nav-item">
            <div id='x4' class="item no-act" onclick="toPage('./dhcp.html')">Ethernet設定</div>
            <div class="hide">
                <div>
                    <div id='x41' class="item1 no-act">DHCP固定割当設定</div>
                    <div class="">
                        <div class="item2" id="DHCP">DHCP固定割当設定</div>
                        <div class="item2" id="MAC">MAC IP Bindingリスト</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="nav-item">
            <div id='x5' class="item no-act" onclick="toPage('./port.html')">LAN設定</div>
            <div class="">
                <div>
                    <div id='x51' class="item1 no-act" onclick="toPage('./port.html')">ポートフォワーディング</div>
                    <div class="hide">
                        <div class="item2 " id="port" onclick="toPage('./port.html')">ポートフォワーディング</div>
                        <div class="item2" id="port_list" onclick="toPage('./portList.html')">ポートフォワーディングリスト</div>
                    </div>
                </div>
                <div>
                    <div id='x52' class="item1 no-act" onclick="toPage('./ipFiltering.html')">IPパケットフィルタリング</div>
                    <div class="hide">
                        <div class="item2 " id="IP" onclick="toPage('./ipFiltering.html')">IPパケットフィルタリング</div>
                        <div class="item2 " id="IP_list" onclick="toPage('./ipList.html')">IPパケットフィルタリングリスト</div>
                    </div>
                </div>
                <div>
                    <div id='x54' class="item1 no-act" onclick="toPage('./ipv6Filtering.html')">IPv6パケットフィルタリング</div>
                    <div class="hide">
                        <div class="item2" id="IPV6">IPv6パケットフィルタリング</div>
                        <div class="item2" id="IPV6_list">IPv6パケットフィルタリングリスト</div>
                    </div>
                </div>
                <div>
                    <div id='x55' class="item1"
                         onclick="toPage('./wan.html')">
                        WANポートPingブロック
                    </div>
                </div>
                <div>
                    <div id='x53' class="item1 choose"
                         onclick="toPage('./dmz.html')">
                        DMZ
                    </div>
                </div>
            </div>
        </div>
        <div class="nav-itm">
            <div id='x6' class="item no-act" onclick="toPage('./password.html')">端末設定</div>
            <div class="hide">
                <div>
                    <div class="">
                        <div class="item" onclick="toPage('./password.html')">パスワード設定</div>
                        <div class="item" onclick="toPage('./dataUsage.html')">データ使用量</div>
                        <div class="item" onclick="toPage('./reboot.html')">リブート</div>
                        <div class="item" onclick="toPage('./deviceInformation.html')">デバイス情報</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="title">DMZ</div>
        <div style="margin-left: 100px;margin-top: 10px;">
            <p>外部からのすべてのポートへのアクセス要求を受け付けるIPアドレスを設定できます。</p>
            <p>ポートフォワーディング設定で指定しているポートは、ポートフォワーディングが優先されます。</p>
        </div>
        <div class="ip">
            <form action="" class="default-form">
                <table class="input-table">
                    <tbody>
                    <tr>
                        <th><label class="default-label" for="">DMZ</label></th>
                        <td>
                            <label style="display: block;">
                                <input onclick="manuallySetting('1')" class="a-radio" type="radio" name="hand_auto"
                                       value="1" checked><span class="b-radio"></span>ON
                            </label>
                            <label style="display: block;">
                                <input onclick="manuallySetting('0')" class="a-radio" type="radio" name="hand_auto"
                                       value="0" ><span class="b-radio"></span>OFF
                            </label>


                        </td>
                    </tr>
                    <tr>
                        <th><label class="default-label" for="start_ip">IPアドレス</label></th>
                        <td>
                            <input type="text" disabled="false" class="default-input wifi-input" name="start_ip"
                                   id="start_ip" placeholder="0.0.0.0～255.255.255.255" style="height: 40px;width: 206px;"/>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <div class="horizontal-box">
                    <div class="submit-btn" onclick="dmzSubmit()">適用</div>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="./js/utils.js"></script>
<script>
    window.onload = function () {
        getStatus()
        getSimNum()
    }

    function getSimNum() {
        var num = sessionStorage.getItem('activeSimNumber')
        if (num == 0) {
            var btn = document.getElementById('x2')
            btn.onclick = function() {}
            btn.style.backgroundColor = '#eee'
        }

        var params = {}
        Ajax.post(baseUrl + '/action/getActiveSimCardNumber', JSON.stringify(params), function(res) {
            var response = JSON.parse(res)
            if (response.status == 'success') {
                sessionStorage.setItem('activeSimNumber', response.data.activeSimNumber)
            }
        })
    }
    function getStatus(){
        var params ={}
        Ajax.post(baseUrl + '/action/getDMZStatus', JSON.stringify(params), function (res) {
            var response = JSON.parse(res)
            if (response.status == 'success') {
                var radioArr = document.getElementsByName("hand_auto");
                document.getElementById('start_ip').value = response.data.dmzIpAddress
                for (var i = 0; i < radioArr.length; i++) {
                    if (radioArr[i].value == response.data.dmzEnable.toString()) {
                        radioArr[i].checked = "checked";
                        manuallySetting(response.data.dmzEnable)
                    } else {
                        radioArr[i].checked = "";
                    }
                }
            } else {
                Message.info('処理に失敗しました')
            }
        })
    }

    function exitSubmit(){
        getStatus()
    }

    function manuallySetting(data) {
        var wifi_psw = document.getElementsByClassName("wifi-input")
        Utils.SetInputStatus(wifi_psw, data)
    }

    function dmzSubmit(){
        var dmzStatus = Utils.GetRadioValue("hand_auto")
        var ip = document.getElementById('start_ip').value
        if(!IPTest(ip)){
            Message.info('IPアドレスが正しくありません')
            return false
        }
        var params ={
            dmzEnable:dmzStatus,
            dmzIpAddress:ip
        }
        Ajax.post(baseUrl + '/action/setDMZStatus', JSON.stringify(params), function (res) {
            var response = JSON.parse(res)
            if (response.status == 'success') {
                Message.info("設定しました")
            } else {
                Message.info('処理に失敗しました')
            }
        })
    }
</script>
</body>

</html>
